<template>
  <div>
    <v-container fluid>
      <v-row>
        <v-col v-for="card in cards" :key="card.title" :cols="flex">
          <v-card @click="selectType(card.id)">
            <v-img
              :src="card.coverUrl"
              class="white--text align-end"
              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
              height="200px"
            >
              <v-card-title v-text="card.name"></v-card-title>
            </v-img>

            <v-card-actions>
              <v-spacer></v-spacer>

              <v-btn icon @click="selectType(card.id)"> 阅览 </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import api from "../../axios/api";
export default {
  data: () => {
    return {
      datas: null,
      flex:6,
      cards: [
        {
          title: "Pre-fab homes",
          src: "https://cdn.vuetifyjs.com/images/cards/house.jpg",
          flex: 6,
        },
        {
          title: "Favorite road trips",
          src: "https://cdn.vuetifyjs.com/images/cards/road.jpg",
          flex: 6,
        },
        {
          title: "Best airlines",
          src: "https://cdn.vuetifyjs.com/images/cards/plane.jpg",
          flex: 6,
        },
        {
          title: "Best airlines",
          src: "https://cdn.vuetifyjs.com/images/cards/plane.jpg",
          flex: 6,
        },
      ],
    };
  },
  components: {},
  mounted: function () {
    this.getAllWorkClass();
  },
  methods: {
    getAllWorkClass() {
      api
        .getAllWorkClass()
        .then((res) => {
          // console.log(res);
          this.cards = res.data.datas;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectType(typeId){
      this.$router.push(`/categoryList/${typeId}`);
    }
  },
};
</script>

<style>
.tab_item {
  width: 100%;
}
</style>